<template>
  <div class="payment-qr-code">
    <!-- 头部导航 -->
    <w-bread-nav title="支付中心"></w-bread-nav>
    <!-- 主内容 -->
    <div class="app-container">
      <div class="payment-price">
        扫一扫付款（元）
        <div class="txt-qr">{{orderInfo.PriceAddshipPrice || 0}}</div>
      </div>
      <!-- 付款二维码 -->
      <div class="qr-code">
        <div class="code-bg">
          <!--  生成二维码 -->
          <div class="qr-code-content">
            <div class="code-img" id="qr-code"></div>
          </div>
          <div class="qr-code-border"></div>
        </div>
      </div>
    </div>
    <!-- 支付结果弹框 -->
    <div class="g-pay-result-pop" v-if="isPayResultPop">
      <div class="pay-result-pop">
        <div class="hd clearfix">
          <span class="tit fl">付款遇到问题？</span>  
          <i class="fr iconfont ico-close" @click="onPayError(1)"></i>  
        </div>
        <div class="bd">
          <p class="ct">付款完成前请不要关闭此窗口。完成付款后请根据情况点击下面按钮：</p>
        </div>
        <div class="ft">
          <w-button type="default" @on-click="onPayError(1)">支付遇到问题</w-button>
          <w-button type="main" @on-click="onPaySuccess(1)">已完成付款</w-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { apiOrderByIds } from 'js/api'
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        ids: this.$route.query.ids,
        orderInfo: {},
        paymentInfo: {},
        isPayResultPop: false,
        data: {},
        isA: false,
        url: sessionStorage.getItem('link') || '',
        link: '',
        timer: ''
      }
    },
    created() {
      // 判断订单Id是否存在，存在请求总价，否则返回上一级
      if (this.ids) {
        this.url = decodeURIComponent(this.url.split('uuid=')[1])
        /**
         * 首次请求，拉起支付二维码
         */
        this.fetchOrder(this.ids)
        setTimeout(() => {
          $('#qr-code').qrcode({
            render: 'canvas', // table方式
            width: 178, // 宽度
            height: 178, // 高度
            text: this.url // 任意内容
          })
        }, 100)
        return
      }
      this.$toast('订单不存在...', () => {
        this.$router.push('/')
      })
    },
    mounted() {
      // clearInterval(this.timer)
      /**
       * 8s定时请求判断当前订单状态
       */
      this.timer = setInterval(() => {
        this.fetchOrder(this.ids)
        /**
         * 根据订单状态判断成功或失败
         */
      }, 8000)
      /**
       * 支付超时判断，10分钟未支付跳至首页
       */
      setTimeout(() => {
        this.$toast('支付超时，请重新支付...', () => {
          this.$router.push('/')
          return
        })
      }, 600000)
    },
    methods: {
      /**
       * 支付失败
       */
      onPayError(id) {
        if (id == 1) {
          this.isPayResultPop = false
        }
      },

      /**
       * 支付成功
       */
      onPaySuccess(id) {
        if (id == 1) {
          this.$router.push('/my/order')
        }
      },
      fetchOrder(id) {
        apiOrderByIds(this.$store.getters.token, id).then((data) => {
          this.orderInfo = data
          this.orderStatus = data.orderFormList[0].orderStatus
          if (data.orderFormList[0].orderStatus == '20') {
            clearInterval(this.timer)
            this.$router.push(`/notify`)
          } else if (data.orderFormList[0].orderStatus != '10' && data.orderFormList[0].orderStatus != '18') {
            clearInterval(this.timer)
            this.$router.push(`payFail`)
          }
        })
      }
    },
    computed: {
      ...mapGetters(['token'])
    },
    destroyed() {
      clearInterval(this.timer)
    }
  }
</script>

<style lang="scss" scoped>
@import '../scss/_var.scss';
.txt-qr {
  color: #fc6019;
}
.qr-code-content {
  width: 100%
}
.code-img {
  display: inline-block;
  margin: 0 auto;
  position: absolute;
  margin-top: 37px;
  margin-left: 45px;
  z-index: 3;
}
.qr-code {
  background-color: #fff;
  font-size: 30px;
  .code-bg {
    margin: 0 auto;
    width: 264px;
    height: 286px;
    background: url('../assets/payment/saoma.png') no-repeat;
    background-size: 100% 100%;
  }
}
.qr-code-border {
  position: absolute;
  width: 192px;
  height: 192px;
  border: 1px solid #afafaf;
  margin-top: 30px;
  margin-left: 37px;
  background-color: #ffffff;
  z-index: 2;
}

.app-container {
  position: relative;

  .group {
    text-align: right;
    .cancel {
      background-color: #dddddd;
      margin-right: 40px;
      width: 140px;
      height: 26px;
    }
    .main {
      width: 140px;
      height: 26px;
    }
  }

  .payment-price {
    height: 100px;
    margin-top: 22px;
    padding-top: 20px;
    line-height: 33px;
    font-size: 16px;
    text-align: center;
    border-bottom: 1px solid #f6f6f6;
    background: $color-white;
  }
  .rule-list {
    background-color: #FFFFFF;
    color: #666666;
    width: 700px;
    height: 360px;
    padding: 0px 30px;
    position: absolute;
    top: 52px;
    left: 332px;
    z-index: 10;

    .title {
      border-bottom: 1px solid #666666;
      font-size: 14px;
      height: 46px;
      padding: 20px 0px 10px 0px;
      text-align: center;

      .iconfont {
        cursor: pointer;
        float: right;
      }
    }

    .content {
      font-size: 12px;
      line-height: 22px;
      height: 260px;
      overflow: auto;
      padding-top: 20px;
    }
  }
  .mark {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 5;
  }
}
.g-pay-result-pop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .3);
  }
  .pay-result-pop {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 550px;
    height: 190px;
    margin-left: -275px;
    margin-top: -95px;
    padding: 20px 38px;
    background: #fff;
    color: #666;
    .hd {
      padding: 10px 0;
      border-bottom: 1px solid #ddd;
      .tit {
        font-size: 16px;
      }
      .ico-close {
        cursor: pointer;
      }
    }
    .bd {
      padding: 20px 0;
    }
    .ft {
      padding-top: 20px;
      text-align: center;
      .default {
        margin-right: 38px;
      }
      .btn {
        height: 28px;
      }
    }
  }
</style>